import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, Button, Radio, Upload, Tabs, message } from 'antd';
import React, { useState, useEffect } from 'react';
import { API_URL } from '@/config/api';
import { upload } from '../service'

const PicUpload = props => {
  const { lostItemPicVisible, lostItemPic, form, onCancel, onSubmit: handleImgs } = props;

  // 图片小类
  const [picTypeOptions, handlePicTypeOptions] = useState([{ label: '遗失物品照片', value: 1 }])
  // 上传文件
  const [fileList, updateFileList] = useState([]);
  const [fileListInfo, handleFileListInfo] = useState({ goodFileList: [], touristFileList: [], paperFileList: [] })

  // 表单格式
  const layout = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 20,
    },
  };

  // 图片大类
  const picCategoryOptions = [
    { label: '物品相关', value: 1 },
    { label: '旅客相关', value: 2 },
    { label: '单据相关', value: 3 },
  ];

  // 上传配置
  const uploadProps = {
    fileList,
    onRemove: file => {
      let goodFileList = fileListInfo.goodFileList
      let touristFileList = fileListInfo.touristFileList
      let paperFileList = fileListInfo.paperFileList

      let goodFileListData = goodFileList.filter(item => {
        return item.file.uid !== file.uid
      })

      let touristFileListData = touristFileList.filter(item => {
        return item.file.uid !== file.uid
      })

      let paperFileListData = paperFileList.filter(item => {
        return item.file.uid !== file.uid
      })

      handleFileListInfo({ ...fileListInfo, goodFileList: goodFileListData, touristFileList: touristFileListData, paperFileList: paperFileListData })
    },
    beforeUpload: file => {
      if (fileListInfo.goodFileList.length + fileListInfo.touristFileList.length + fileListInfo.paperFileList.length >= 9) {
        message.error('最多上传9张图片')
        return false
      } else {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 20;

        if (!isJPG && !isPNG) {
          message.warning(`请选择正确图片格式`)
        }
        if (!isLt2M) {
          message.warning(`请选择正确图片大小，最大不超过20MB`)
        }
        return (isJPG || isPNG) && isLt2M
      }
    },
    onChange: info => {
      updateFileList(info.fileList.filter(file => !!file.status));
      if (info.file.status === 'done') {
        if (form.getFieldsValue().picCategory === 1) {
          handleFileListInfo({ ...fileListInfo, goodFileList: [...fileListInfo.goodFileList, { file: info.file.originFileObj, imgUrl: info.file.response.data[0], oneType: form.getFieldsValue().picCategory, twoType: form.getFieldsValue().picType }] })
        } else if (form.getFieldsValue().picCategory === 2) {
          handleFileListInfo({ ...fileListInfo, touristFileList: [...fileListInfo.touristFileList, { file: info.file.originFileObj, imgUrl: info.file.response.data[0], oneType: form.getFieldsValue().picCategory, twoType: form.getFieldsValue().picType }] })
        } else if (form.getFieldsValue().picCategory === 3) {
          handleFileListInfo({ ...fileListInfo, paperFileList: [...fileListInfo.paperFileList, { file: info.file.originFileObj, imgUrl: info.file.response.data[0], oneType: form.getFieldsValue().picCategory, twoType: form.getFieldsValue().picType }] })
        }
      }
    },
  };

  // 切换图片大类更换小类
  const changePicType = (e) => {
    if (e.target.value === 1) {
      handlePicTypeOptions([
        { label: '遗失物品照片', value: 1 }
      ])
    } else if (e.target.value === 2) {
      handlePicTypeOptions([
        { label: '身份证', value: 2 },
        { label: '委托书', value: 3 },
        { label: '登机牌', value: 4 },
        { label: '其他', value: 10 }
      ])
    } else if (e.target.value === 3) {
      handlePicTypeOptions([
        { label: '认领单', value: 5 },
        { label: '上交单', value: 6 },
        { label: '遗失物品统计单', value: 7 },
        { label: '快递单', value: 8 },
        { label: '旅客授权签字图', value: 9 },
        { label: '其他', value: 10 }
      ])
    }
    form.setFieldsValue({
      picType: ''
    })
  }

  // 确认
  const okHandle = () => {
    let isHaveData = false;
    for (let key in fileListInfo) {
      if (fileListInfo[key] && fileListInfo[key].length !== 0) {
        isHaveData = true;
        break;
      }
    }
    if (isHaveData) {
      handleImgs(fileListInfo);
    } else {
      message.warning('图片不能为空');
    }
  };

  useEffect(() => {
    handleFileListInfo(lostItemPic)
  }, [])

  return (
    <Modal
      title={[
        <div key="title">图片上传</div>
      ]}
      width="700px"
      visible={lostItemPicVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <div>
        <Form.Item
          {...layout}
          label='图片大类'
          labelAlign='left'
        >
          {form.getFieldDecorator('picCategory', {
            initialValue: 1
          })(
            <Radio.Group onChange={(e) => changePicType(e)}>
              {
                picCategoryOptions.map(item => (
                  <Radio.Button value={item.value}>{item.label}</Radio.Button>
                ))
              }
            </Radio.Group>
          )}
        </Form.Item>
        <Form.Item
          {...layout}
          label='图片小类'
          labelAlign='left'
        >
          {form.getFieldDecorator('picType')(
            <Radio.Group>
              {
                picTypeOptions.map(item => (
                  <Radio.Button value={item.value}>{item.label}</Radio.Button>
                ))
              }
            </Radio.Group>
          )}
        </Form.Item>
        <Upload action={API_URL + '/api/uploadAndDownload/upload'} listType="picture" {...uploadProps}>
          <Button type="primary" disabled={!form.getFieldsValue().picType}>选择图片</Button>
        </Upload>
      </div>
    </Modal>
  );
};

export default Form.create()(PicUpload);
